<template>
  <layout-content>
    <div class="mui-content">
      <header class="mui-bar mui-bar-nav flex-justify-start">
        <span class="">消息</span>
      </header>
      <div class="message-tab mui-segmented-control flex-justify-start">
        <a
          @click="loadData('workMessage', 0)"
          :class="{ 'mui-active': tabIndex == 0 }"
          class="mui-control-item"
          href="javascript:void(0);"
        >
          <img src="../../../static/images/msg_work_on.png" />
          <span
            class="mui-badge mui-badge-danger"
            v-if="showWorkMessageCount"
            >{{ workMessageCount }}</span
          >工作消息</a
        >
        <span style="color: #eee">|</span>
        <a
          @click="loadSystemData(0)"
          :class="{ 'mui-active': tabIndex == 1 }"
          class="mui-control-item"
          href="javascript:void(0);"
        >
          <img src="../../../static/images/msg_xitong_on.png" />
          <span
            v-if="
              workMessage.systemMsgCount && workMessage.systemMsgCount.count > 0
            "
            class="mui-badge mui-badge-danger"
            >{{ workMessage.systemMsgCount.count }}</span
          >系统消息</a
        >
      </div>
      <div class="mui-page-content message-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll-wrapper">
            <!-- --------工作消息---------------start -->
            <div v-if="tabIndex == 0" id="work-message" class="mui-active">
              <div class="work-message-lists mui-scroll-wrapper">
                <cube-scroll
                  ref="scroll"
                  :options="options"
                  @pulling-up="onPullingUp"
                >
                  <cube-swipe>
                    <transition-group name="swipe" tag="div">
                      <div
                        class="work-message-item"
                        v-for="(data, index) in workMessageItem"
                        :key="data.category"
                      >
                        <cube-swipe-item
                          class="swiper-no-swiping"
                          ref="swipeItem"
                          :index="index"
                          @btn-click=""
                        >
                          <div @click="detail(data)">
                            <div
                              class="flex-between-center mui-table-view-cell"
                            >
                              <h5 class="">{{ data.key }}</h5>
                              <div class="flex-center">
                                <span class="mine-lists-money">{{
                                  data.count
                                }}</span>
                                <span
                                  class="mui-icon mui-icon-arrowright"
                                ></span>
                              </div>
                            </div>
                          </div>
                        </cube-swipe-item>
                      </div>
                    </transition-group>
                  </cube-swipe>
                  <!-- <div
                    class="text-center no-data"
                    v-if="workMessageItem.length === 0"
                  >
                    <img src="../../../static/images/no_data.png" alt="" />
                    <p>暂无数据</p>
                  </div> -->
                  <!-- W noData -->
                  <noData v-if="workMessageItem.length === 0"></noData>
                  <onBottom v-else-if="onBottom"></onBottom>
                </cube-scroll>
              </div>
            </div>
          </div>
          <!-- --------工作消息---------------end -->
          <!-- --------系统消息---------------start -->
          <div v-if="tabIndex == 1" id="system-message" class="mui-active">
            <div class="work-message-lists mui-scroll-wrapper">
              <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-up="loadSystemData"
              >
                <cube-swipe>
                  <transition-group name="swipe" tag="div">
                    <div
                      class="work-message-item"
                      v-for="(data, index) in systemMessage"
                      :key="index"
                    >
                      <cube-swipe-item
                        ref="swipeItem"
                        :index="index"
                        @btn-click=""
                      >
                        <div @click="detail(data)">
                          <div
                            class="flex-between-center work-message-item-header"
                          >
                            <!--<h3 class="flex-center"><b v-if="isRead(data.isRead)">·</b>{{data.category}}</h3>-->
                            <p class="msg-date">
                              {{ fn.formatHM(data.createTime) }}
                            </p>
                          </div>
                          <div class="work-message-item-title">
                            <h5 class="mui-ellipsis-2">
                              <b class="text-red" v-if="isRead(data.isRead)"
                                >·</b
                              >{{ data.content }}
                            </h5>
                            <!--   <p class="mine-lists-tips">时间：{{data.createTime}}</p>-->
                          </div>
                          <div class="flex-between-center message-details">
                            <p>查看详情</p>
                            <span class="mui-icon mui-icon-arrowright"></span>
                          </div>
                        </div>
                      </cube-swipe-item>
                    </div>
                  </transition-group>
                </cube-swipe>
                <!-- <div
                  class="text-center no-data"
                  v-if="systemMessage.length === 0"
                >
                  <img src="../../../static/images/no_data.png" alt="" />
                  <p>暂无数据</p>
                </div> -->
                <!-- W noData -->
                <noData v-if="systemMessage.length === 0"></noData>
                <onBottom v-else-if="onBottom"></onBottom>
              </cube-scroll>
            </div>
          </div>
        </div>
        <!-- --------系统消息---------------end -->
      </div>
    </div>
  </layout-content>
</template>

<script>
import footerbar from "@/components/layout/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";

export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      tabIndex: 0,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      workMessage: {},
      systemMessage: [],
      workMessageItem: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 10,
      currentSourceOfPublicationId: "",
      noData: true,
      workMessageCount: 0,
      showWorkMessageCount: true,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    detail(data) {
      this.$router.push({ path: `/newsLists/${data.category}/${data.key}` });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    loadData(news, pageIndex) {
      this.pageIndex = 0;
      this.workMessage = {};
      this.workMessageItem = [];
      this.pageIndex = pageIndex || this.pageIndex;
      news = news || "workMessage";
      this.tabIndex = news === "workMessage" ? 0 : 1;
      loginService.getNewsCover().then((res) => {
        if (res.code !== 200) {
          this.$refs.scroll.forceUpdate();
          return tools.tip(
            res.describe === "未查询到资源" ? "已无更多数据" : res.describe
          );
        }
        this.pageIndex++;
        this.workMessage = res.data;
        this.workMessageItem = this.workMessageItem.concat(
          res.data.msgCountList
        );
        if (
          !this.workMessage ||
          !this.workMessage.workMsgCount ||
          this.workMessage.workMsgCount.count === 0
        ) {
          this.showWorkMessageCount = false;
        } else {
          this.workMessageCount = this.workMessage.workMsgCount.count;
        }
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
      });
    },
    // 通过API名称获取数据列表
    loadDataByApi(apiName, pageIndex) {
      this.pageIndex = pageIndex || this.pageIndex;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        category: "0",
      };
      return loginService[apiName](data).then((res) => {
        if (res.code !== 200) {
          this.$refs.scroll.forceUpdate();
          return tools.tip(
            res.describe === "未查询到资源" ? "已无更多数据" : res.describe
          );
        }
        this.pageIndex++;
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
        return res.data;
      });
    },
    loadSystemData(pageIndex) {
      pageIndex = pageIndex || this.pageIndex;
      this.tabIndex = 1;
      this.getSystemData(pageIndex);
    },
    // 工作消息
    getCoverData(pageIndex) {
      this.loadDataByApi("getNewsCover", pageIndex).then((res) => {
        this.workMessageItem = this.workMessageItem.concat(
          res.data.msgCountList
        );
      });
    },
    // 系统消息
    getSystemData(pageIndex) {
      this.loadDataByApi("getSysNotice", pageIndex).then((res) => {
        this.systemMessage = this.systemMessage.concat(res);
      });
    },
    isRead(isRead) {
      if (isRead === "yes") {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
